<template>
  <div class="set">
    <a-card
      title="个人资料"
      style="width: 100%">
      <a-form-model
        ref="ruleForm"
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        class="form_box">
        <a-form-model-item label="头像">
          <div class="userimg">
            <a-upload
              v-if="form.user_img==''"
              name="file"
              action="https://jfk-api.letuilm.com/api/upload_img"
              list-type="picture-card"
              :multiple="false"
              :show-upload-list="false"
              :before-upload="beforeUpload"
              @change="handleChange3">
              <div class="nogoodsimg">
                <div class="no_main">
                  <a-icon type="fund" />
                  <p>
                    请上传头像
                  </p>
                </div>
              </div>
            </a-upload>
            <div
              v-else
              class="img_box">
              <a-avatar
                :src="form.user_img"
                :size="100"
                icon="user" />
              <a-icon
                type="close-circle"
                @click="closeimg" />
            </div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="昵称">
          <a-input
            v-model="form.nickname"
            placeholder="请输入昵称" />
        </a-form-model-item>
        <a-form-model-item label="手机号">
          <a-input
            v-model="form.phone"
            placeholder="请输入手机号" />
        </a-form-model-item>
        <a-form-model-item label="团队名称">
          <a-input
            v-model="form.team_name"
            placeholder="请输入团队名称" />
        </a-form-model-item>
        <a-form-model-item label="团队介绍">
          <a-textarea
            :auto-size="{ minRows: 3, maxRows: 6 }"
            v-model="form.team_desc"
            placeholder="请输入团队介绍" />
        </a-form-model-item>
        <a-form-model-item label="QQ">
          <a-input
            v-model="form.qq"
            placeholder="请输入QQ号" />
        </a-form-model-item>
        <a-form-model-item label="京东联盟ID">
          <a-input
            v-model="form.jd_id"
            placeholder="请输入京东联盟ID" />
        </a-form-model-item>
        <a-form-model-item label="推广位ID">
          <a-input
            v-model="form.tgw_id"
            placeholder="请输入推广位ID" />
        </a-form-model-item>
        <a-form-model-item label="">
          <a-button
            class="getinfo"
            type="primary"
            size="large"
            @click="updateMyInfo">
            修改信息
          </a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
  import {
    getMyInfo,
    updateMyInfo
  } from '@/api/userinfo'
  export default {
    name: 'Set',
    data () {
      return {
        labelCol: {
          span: 4
        },
        wrapperCol: {
          span: 20
        },
        form: {
          id: '1', // 用户id
          user_img: '', // 用户头像
          nickname: '', // 昵称
          phone: '', // 手机号
          //   user_type: 1, // 账号类型 1=京粉用户 2 招商用户 3 京东商户
          team_name: '', // 团队名称
          team_desc: '', // 团队描述
          qq: '', // qq
          jd_id: '', // 京东联盟ID
          tgw_id: '' // 推广位ID
        }
      }
    },

    computed: {

    },
    created () {
      if (this.$route.query.token) {
        console.log('token', this.$route.query.token)
      }
      this.getMyInfo()
    },
    mounted () {

    },
    methods: {
      closeimg () {
        this.form.user_img = ''
      },
      beforeUpload (file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('对不起,只支持jpg/png格式的图片!')
        }
        const isLt2M = file.size / 1024 / 1024 < 5
        if (!isLt2M) {
          this.$message.error('对不起!图片大小超过5M!')
        }
        return isJpgOrPng && isLt2M
      },
      handleChange3 (info) {
        // console.log('info', info)
        if (info.file.response.data) {
          this.form.user_img = `//` + info.file.response.data.url
        }
      },
      // 修改
      updateMyInfo () {
        updateMyInfo(this.form)
          .then(res => {
            if (res.code === 200) {
              console.log('修改返回', res)
              this.$message.success('修改成功!')
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      },

      // 获取个人信息
      getMyInfo () {
        getMyInfo()
          .then(res => {
            if (res.code === 200) {
              console.log('个人信息', res)
              this.form = res.data
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }

    }
  }
</script>

<style lang='less' scoped>
.set {
  .form_box {
    width: 800px;

    .getinfo {
      margin-left: 130px;
    }

    .userimg {
      .img_box {
        position: relative;
        width: 100px;
      }

      /deep/.ant-upload {
        border-radius: 50%;
        padding: 0px;
      }

      .anticon-close-circle {
        position: absolute;
        top: 0;
        right: 0;
        font-size: 16px;
        cursor: pointer;
        display: none;
        z-index: 3;
        transition: all 0.3s linear;
      }

      .img_box:hover {
        .anticon-close-circle {
          display: block;
        }
      }

      .anticon-close-circle:hover {
        display: block;
        transform: rotate(90deg);
      }
    }
  }
}
</style>
